import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
// import App from './App';
const root = document.getElementById('root')

// 函数组件没有生命周期----使用useEffect模拟生命周期
const App = () => {
  const [show, setShow] = React.useState(true)
  const xxx = () => {
    setShow(!show)
  }
  return (
    <>
      <button onClick={() => xxx()}> {show ? 'show' : 'hide'}</button>
      <div>{show ? <Com /> : null}</div>
    </>
  )
}
const Com = () => {
  useEffect(() => {
    console.log('com组件状态变化执行')
    return () => {
      console.log('模拟componentWillUnmount')
    }
  })
  return (
    <div>11</div>
  )
}

ReactDOM.render(<App />, root);
